<template>
    <div class="link">
        <div>
               <el-divider></el-divider>
      <h2>/前端类学习篇/</h2>
      <el-divider></el-divider>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="---学习vue项目" name="1">
          <div>
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1QU4y1E7qo?p=1"
              >前端项目/vue项目实战/vue+element-ui/vue经典案例分享/紧贴实战的vue经典案例</el-link
            >
          </div>
        </el-collapse-item>
        <el-collapse-item title="---重要学习链接" name="2">
        <div>
            <el-link type="info" href="https://gitee.com/">gitee</el-link><br />
            <el-link
              type="info"
              href="https://element.eleme.cn/#/zh-CN/component/installation"
              >elementUi</el-link
            ><br />
            <el-link type="info" href="http://www.axios-js.com/zh-cn/docs/"
              >axios官方文档</el-link
            ><br />
            <el-link
              type="info"
              href="https://cloud.tencent.com/login?s_url=https%3A%2F%2Fconsole.cloud.tencent.com%2Fexpense%2Fdeal%3FpayMode%3D1"
              >腾讯云</el-link
            ><br />
        </div>
        </el-collapse-item>
        <el-collapse-item title="---重要相关网站收藏" name="3">
          <div>
            <el-link type="info" href="http://114.132.240.87/login"
              >我发布的网站</el-link
            ><br />
            <el-link type="info" href="http://www.phplaozhang.com/"
              >老张个人网站</el-link
            ><br />
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-skeleton
        :rows="3"
        animated
        style="text-align: left; margin: 20px 0"
      />
        </div>
    <div>
      <el-divider></el-divider>
      <h2>/英语学习篇/</h2>
      <el-divider></el-divider>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="---四级篇" name="4">
          <div>
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1yr4y1n7cU?spm_id_from=333.999.0.0"
              >瑞斯拜2022上 四级阅读课程合集（仔细阅读-长篇-选词）</el-link
            ><br />
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1uU4y1j74N?spm_id_from=333.999.0.0"
              >2021四六级长篇阅读冲刺方法</el-link
            ><br />
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1at4y1i7cy?spm_id_from=333.999.0.0"
              >【合集】【四级听力】全网最简单粗暴能提分的四级教程！</el-link
            ><br />
          </div>
        </el-collapse-item>
        <el-collapse-item title="---口语学习篇" name="5">
          <div>
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1xy4y1v7qj?spm_id_from=333.999.0.0"
              >超级实用的英语提高课 Speak English With Tiffani 【合集】</el-link
            ><br />
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1cu411B7Go?spm_id_from=333.999.0.0"
              >10年+英语学习过程全记录</el-link
            ><br />
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1ki4y1y7r2?spm_id_from=333.999.0.0"
              >17岁UP主在海外二胡脱口秀 这就是咱们的文化自信！</el-link
            ><br />
            <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1JQ4y1y7RG?p=1"
              >【YouTube】全英VLOG | Anna lenks合集 | 英字字幕</el-link
            ><br />
          </div>
        </el-collapse-item>
        <el-collapse-item title="---推荐英语口语博主" name="6">
          <div>
            <el-link
              type="info"
              href="https://space.bilibili.com/340223423?spm_id_from=333.788.b_765f7570696e666f.2"
              >Ella聊美语</el-link
            ><br />
            <el-link
              type="info"
              href="https://space.bilibili.com/371167758?spm_id_from=333.788.b_765f7570696e666f.1"
              >nateonion</el-link
            ><br />
          </div>
        </el-collapse-item>
        <el-collapse-item title="---其他" name="7">
          <div>
              <el-link
              type="info"
              href="https://www.bilibili.com/video/BV1GU4y1Y7hp?spm_id_from=333.999.0.0"
              >美国小学原版科普系列 60集全</el-link
            ><br />
            
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-skeleton
        :rows="3"
        animated
        style="text-align: left; margin: 20px 0"
      />
    </div>
    <div>
      <el-divider></el-divider>
      <h2>/待续/</h2>
      <el-divider></el-divider>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="---待续" name="8">
          <div>
            <el-link
              type="info"
              href=""
              >待续-->(点击可返回首页)</el-link
            ><br />
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-skeleton
        :rows="3"
        animated
        style="text-align: left; margin: 20px 0"
      />
    </div>
    </div>
</template>

<style lang="less" scoped>

.el-collapse-item {
  text-align: left;
}
h2{
    font-size: 30px;
  font-family: "Times New Roman", Times, serif;
  color: hsl(227, 31%, 58%);
}
</style>

<script>
export default{
    name: 'vueLink',
    data() {
        return {
            activeNames: ["1","4","8"],
        }
    },
    methods: {
    handleChange(val) {
      console.log(val);
    },
  },
}
</script>
